window.onload = function() {
    let body = document.querySelector('body');
    let wu = document.querySelector('.wu');
    console.log(wu);
    let html = document.querySelector('html');
    let obj = {
        url: 'https://api.yimian.xyz/img?type=wallpaper',
        // meiri: 'v1.hitokoto.cn',
    };
    let strr = document.createElement('ul')
    strr.innerHTML = `
    <h1 id='h1'>${obj.meiri}</h1>
    <ul>
        <a href="https://cook.yunyoujun.cn/" target="_blabk">
            <li>隔离食用手册</li>
        </a>
        <a href="">
            <li>少时诵诗书</li>
        </a><a href="">
        <li>少时诵诗书</li>
    </a>
    </ul>
`;
    // 把ul内容追加到strr里面
    wu.append(strr)
    body.style.background = `url(${obj.url}) no-repeat `
    body.style.backgroundSize = 'cover';
    // 烟花特效js
    class Circle {
        constructor({ origin, speed, color, angle, context }) {
            this.origin = origin;
            this.position = {...this.origin }
            this.color = color;
            this.speed = speed;
            this.angle = angle;
            this.context = context;
            this.renderCount = 0
        }
        draw() {
            this.context.fillStyle = this.color;
            this.context.beginPath();
            this.context.arc(this.position.x, this.position.y, 3, 0, Math.PI * 20);
            // 改变烟花大小   改变烟花形状ss
            this.context.fill();
        }
        move() {
            this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x;
            this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * .2);
            // 改变烟花速度
            this.renderCount++
        }
    }
    class Boom {
        constructor({ origin, context, circleCount = 999, area }) {
            // 改变烟花数量
            this.origin = origin;
            this.context = context;
            this.circleCount = circleCount
            this.area = area;
            this.stop = false;
            this.circles = []
        }
        randomArray(range) {
            const length = range.length
            const randomIndex = Math.floor(length * Math.random());
            return range[randomIndex];
        }
        randomColor() {
            const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
            return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
        }
        randomRange(start, end) { return (end - start) * Math.random() + start }
        init() {
            for (let i = 0; i <
                this.circleCount; i++) {
                const circle = new Circle({ context: this.context, origin: this.origin, color: this.randomColor(), angle: this.randomRange(Math.PI - 1, Math.PI + 1), speed: this.randomRange(0, 15) });
                // 烟花扩散范围
                this.circles.push(circle)
            }
        }
        move() {
            this.circles.forEach((circle, index) => {
                if (circle.position.x > this.area.width || circle.position.y > this.area.height) { return this.circles.splice(index, 1) }
                circle.move()
            });
            if (this.circles.length == 0) { this.stop = true }
        }
        draw() { this.circles.forEach(circle => circle.draw()) }
    }
    class CursorSpecialEffects {
        constructor() {
            this.computerCanvas = document.createElement('canvas');
            this.renderCanvas = document.createElement('canvas');
            this.computerContext = this.computerCanvas.getContext('2d');
            this.renderContext = this.renderCanvas.getContext('2d')
            this.globalWidth = window.innerWidth;
            this.globalHeight = window.innerHeight;
            this.booms = [];
            this.running = false;
        }
        handleMouseDown(e) {
            const boom = new Boom({
                origin: { x: e.clientX, y: e.clientY },
                context: this.computerContext,
                area: {
                    width: this.globalWidth,
                    height: this.globalHeight
                }
            });
            boom.init();
            this.booms.push(boom);
            this.running || this.run();
        }
        handlePageHide() {
            this.booms = [];
            this.running = false
        }
        init() {
            const style = this.renderCanvas.style;
            style.position = 'fixed'
            style.top = style.left = 0;
            style.zIndex = '999999999999999999999999999999999999999999';
            style.fontSize = '300px'
            style.pointerEvents = 'none';
            style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth;
            style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight;
            document.body.append(this.renderCanvas);
            window.addEventListener('mousedown', this.handleMouseDown.bind(this));
            window.addEventListener('pagehide', this.handlePageHide.bind(this))
        }
        run() {
            this.running = true
            if (this.booms.length ==
                0) { return this.running = false }
            requestAnimationFrame(this.run.bind(this));
            this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
            this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
            this.booms.forEach((boom,
                index) => {
                if (boom.stop) { return this.booms.splice(index, 1) }
                boom.move();
                boom.draw();
            });
            this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
        }
    }
    const cursorSpecialEffects = new CursorSpecialEffects();
    cursorSpecialEffects.init();
}